<template>
  <div>
    <a-tabs
      type="card"
      class="small"
      size="small"
      v-if="
        listCpSkcPo.planningType === 1 &&
        listCpSkcPo.compatiblePlanningType !== 1
      "
    >
      <a-tab-pane key="1" tab="上装" v-if="listCpSkcPo.bulkRecordIdS">
        <WorkSheetItem
          v-bind="$attrs"
          :bulkRecordId="listCpSkcPo.bulkRecordIdS"
          :supplierId="supplierId"
          :type="type"
          :listCpSkcPo="listCpSkcPo"
        >
        </WorkSheetItem>
      </a-tab-pane>
      <a-tab-pane key="2" tab="下装" v-if="listCpSkcPo.bulkRecordIdX">
        <WorkSheetItem
          v-bind="$attrs"
          :bulkRecordId="listCpSkcPo.bulkRecordIdX"
          :supplierId="supplierId"
          :type="type"
          :listCpSkcPo="listCpSkcPo"
        ></WorkSheetItem>
      </a-tab-pane>
    </a-tabs>
    <WorkSheetItem
      v-bind="$attrs"
      v-else
      :bulkRecordId="listCpSkcPo.bulkRecordId"
      :supplierId="supplierId"
      :type="type"
      :listCpSkcPo="listCpSkcPo"
    ></WorkSheetItem>
  </div>
</template>
<script>
import { reactive, toRefs } from 'vue'
import WorkSheetItem from './workSheetItem.vue'
export default {
  components: {
    WorkSheetItem
  },
  setup(props, { attrs }) {
    const { type, supplierId, listCpSkcPo = {} } = attrs
    const state = reactive({
      type,
      supplierId,
      listCpSkcPo
    })
    return {
      ...toRefs(state)
    }
  }
}
</script>
<style lang="scss" scoped></style>
